<template>
  <dv-border-box-11 title="星云教育数据中台">
    <div class="dage">
      <!-- 顶部 -->
      <div class="eldeheader">
        <div class="headerju">
          <!-- AI按钮 -->
          <div style="padding-left: 20px">
            <my-chat></my-chat>
          </div>

          <!-- 进行单个学生查询 -->
          <div class="search">
            <my-study></my-study>
          </div>

          <!-- 抽屉 -->
          <div style="padding-right: 1rem">
            <!-- 抽屉按钮开始 -->
            <!-- <el-radio-group v-model="direction"> -->
            <el-button
              @click="drawer = true"
              class="daohang"
              type="primary"
              style="margin-right: 16px; margin-top: 30px"
            >
              切换页面
            </el-button>

            <el-drawer
              title="我是标题"
              :visible.sync="drawer"
              :direction="direction"
              :with-header="false"
              close-on-press-escape
              append-to-body
            >
              <div class="chouti">
                <div class="ct ct1">
                  <ul>
                    <li
                      v-for="(college, index) in colleges"
                      :key="index"
                      :class="{ selected: index === selectedCollegeIndex }"
                      @click="selectCollege(index)"
                    >
                      {{ college }}
                    </li>
                  </ul>
                </div>
                <div class="ct ct2">
                  <ul>
                    <li
                      v-for="(major, index) in majors"
                      :key="index"
                      :class="{ selected: index === selectedMajorIndex }"
                      @click="selectMajor(index)"
                    >
                      {{ major }}
                    </li>
                  </ul>
                </div>
                <div class="ct ct3">
                  <ul>
                    <li
                      v-for="(className, index) in classNames"
                      :key="index"
                      :class="{
                        selected: index === selectedClassNameIndex,
                      }"
                      @click="selectClass(index)"
                    >
                      {{ className }}
                    </li>
                  </ul>
                </div>
                <div class="ct ct4">
                  <ul>
                    <li
                      v-for="(stuInfo, index) in stuNames"
                      :key="index"
                      :class="{ selected: index === selectedStuNameIndex }"
                      @click="selectStuName(index)"
                    >
                      {{ stuInfo.stuName }}
                    </li>
                  </ul>
                </div>
                <div class="ct ct5">
                  <button class="jing" @click="confirmJump">确认跳转</button>
                  <button class="jing" @click="goToFirst">返回首页</button>
                  <button class="jing" @click="goToFirst">退出登录</button>
                </div>
              </div>
            </el-drawer>
            <!-- </el-radio-group> -->
            <!-- 抽屉按钮结束 -->
          </div>
        </div>
      </div>

      <div class="eldefotter">
        <!-- 左侧级联选择器 -->
        <!-- <dv-border-box-12> -->

        <div class="eldeaside">
          <dv-border-box-10 class="Cbian" :color="['#50649a', '#50649b']">
            <div class="Yqiang">
              <div class="upK1">
                <!-- 年级选择 -->
                <div class="chose">
                  <dv-decoration-7>
                    <h3 class="oop">{{ collegeName }}</h3></dv-decoration-7
                  >
                </div>
                <div class="k1">
                  <el-select v-model="value" :placeholder="options[0].label">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                      @click.native="changeYear(item.value)"
                    >
                    </el-option>
                  </el-select>
                </div>
              </div>

              <div class="upK2">
                <!-- 左侧下半部分的级联选择 -->
                <el-col :span="12" class="ting1">
                  <el-menu
                    :unique-opened=true
                    v-for="(major, majorName) in Menudata"
                    :key="majorName"
                    @open="clickMenu(majorName)"
                    @close="clickMenu(majorName)"
                    :default-active="majorName"
                    class="zuihouLA"
                    text-color="#fff"
                    style="
                          color: #79e2f9;
                          background: rgba(112, 140, 210, 0.25);
                          backdrop-filter: blur(25px);"
                    background-color="rgba(112, 140, 210, 0.25)"
                  >
                    <el-submenu :index="majorName">
                      <template slot="title">
                        <i class="el-icon-data-line"></i>
                        <span>{{ majorName }}</span>
                      </template>
                      <!-- <el-menu-item-group> -->
                      <el-menu-item
                        v-for="(className, classId) in major"
                        :index="classId"
                        :key="classId"
                        @click="clickKiss(className)"
                      >
                        <i class="el-icon-user"></i>
                        <span>{{ className }}</span>
                      </el-menu-item>
                      <!-- </el-menu-item-group> -->
                    </el-submenu>
                  </el-menu>
                </el-col>
              </div>
            </div>
          </dv-border-box-10>
        </div>

        <!-- </dv-border-box-12> -->

        <!-- 右侧内容 -->
        <div class="eldemain">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </dv-border-box-11>
</template>

<script>
import MyChat from "@/components/MyChat.vue";
import pubsub from "pubsub-js";
// import { log } from "three";

import MyStudy from "@/components/MyStudy.vue";

export default {
  components: {
    MyChat,
    MyStudy,
  },
  data() {
    return {
      all: ["学校", "专业", "班级", "个人"],
      // 默认是否打开抽屉
      drawer: false,
      // drawer: true,
      // 抽屉方向
      direction: "btt",
      selectedCollegeIndex: null, // 确保在这里定义了 selectedCollegeIndex 属性
      selectedMajorIndex: null,
      selectedClassNameIndex: null,
      selectedStuNameIndex: null,
      drawerCollegeName: "", // 抽屉选中的学院
      drawerMajorName: "", // 抽屉选中的专业
      drawerClassName: "", // 抽屉选中的班级
      drawerStuName: "", // 抽屉选中的学生姓名
      colleges: [
        // "医学院",
        // "商学院",
        // "外语学院",
        // "管理学院",
        // "电信与智能制造学院",
        // "计算机与软件工程学院",
      ],
      majors: [
        // "会计学", "旅游管理", "人力资源管理", "财务管理"
      ],
      classNames: ["(1)班", "(2)班", "(3)班"],
      stuNames: [
        // "kk", "kk", "kk"
      ],
      collegeName: "", // 订阅的消息
      major: "",
      className: "",
      selectedYear: 2023,
      options: [
        {
          value: "2023",
          label: "2023级",
        },
        {
          value: "2022",
          label: "2022级",
        },
        {
          value: "2021",
          label: "2021级",
        },
        {
          value: "2020",
          label: "2020级",
        },
      ],
      value: "",
      Menudata: {
        // 区块链工程: {
        //   "128eadd8-828f-4d95-8652-cb875cd06fb2": "(1)班",
        //   "26f5e23d-c5fa-4524-957f-b8c6aada5a8b": "(2)班",
        //   "248eec7f-7a2f-431f-9395-12862f958057": "(3)班",
        // },
        // 软件工程: {
        //   "f27c98d3-10fc-43e2-bb12-8c772c301925": "(1)班",
        //   "3b7fb438-2ef9-420e-b8bc-215aa2632533": "(2)班",
        //   "55625772-c00a-4c1e-8ec7-e0b7b027440c": "(3)班",
        // },
      },
    };
  },
  created() {
    this.getColleges();
    this.pubId = pubsub.subscribe("sendCollegeName", (msgName, data) => {
      this.collegeName = data;
      // this.initMajorsByCollege();
      this.getMajorAndClassName();
    });
  },
  watch: {
    drawerCollegeName(newVal, oldVal) {
      if (
        newVal != "" &&
        this.drawerMajorName != "" &&
        this.drawerClassName != ""
      ) {
        this.getMajorsByDrawerCollegeName();
        this.getStuNamesByDrawer();
      }
    },
    drawerMajorName(newVal, oldVal) {
      if (
        newVal != "" &&
        this.drawerCollegeName != "" &&
        this.drawerClassName != ""
      ) {
        this.getStuNamesByDrawer();
      }
    },
    drawerClassName(newVal, oldVal) {
      if (
        newVal != "" &&
        this.drawerCollegeName != "" &&
        this.drawerMajorName != ""
      ) {
        this.getStuNamesByDrawer();
      }
    },
  },

  mounted() {
    // this.pubId = pubsub.subscribe('sendCollegeName', (msgName, data) => {
    //   console.log(data);
    // });
    const year = this.selectedYear;
    setTimeout(function () {
      pubsub.publish("year", year);
    }, 0);
  },
  methods: {
    goToFirst() {
      const currentRoute = this.$router.currentRoute.path;
      if (currentRoute !== "/school") {
        // 跳转到目标路由
        this.$router.push("/school");
      }
      this.drawer = false;
    },
    selectCollege(index) {
      // 检查是否已经选中了当前学院
      if (index === this.selectedCollegeIndex) {
        // 如果已经选中了当前学院，则取消选中并恢复原始状态
        this.drawerCollegeName = "";
        this.selectedCollegeIndex = null;
      } else {
        // 如果未选中当前学院，则选中它并将其排在第一个位置
        this.drawerCollegeName = this.colleges[index];
        this.getMajorsByDrawerCollegeName();
        // 将选中的学院从数组中移除
        const selectedCollege = this.colleges.splice(index, 1)[0];
        // 将选中的学院插入到数组的开头
        this.colleges.unshift(selectedCollege);
        // 更新选中的学院索引为第一个位置
        this.selectedCollegeIndex = 0;
      }
    },
    getMajorsByDrawerCollegeName() {
      // console.log("getMajorsByDrawerCollegeName");
      this.$http({
        url: this.$http.adornUrl(
          `/chaoxing/majorratio/list/college/${this.selectedYear}/${this.drawerCollegeName}`
        ),
        method: "get",
      }).then((response) => {
        this.majors = response.data.data;
        this.selectedMajorIndex = null;
        this.selectedClassNameIndex = null;
        this.selectedStuNameIndex = null;
        this.drawerMajorName = "";
        this.drawerClassName = "";
        this.drawerStuName = "";
        this.stuNames = [];
      });
    },
    selectMajor(index) {
      // 检查是否已经选中了当前专业
      if (index === this.selectedMajorIndex) {
        // 如果已经选中了当前专业，则取消选中并恢复原始状态
        this.drawerMajorName = "";
        this.selectedMajorIndex = null;
      } else {
        // 如果未选中当前专业，则选中它
        this.drawerMajorName = this.majors[index];
        this.selectedMajorIndex = index;
        this.selectedClassNameIndex = null;
        this.selectedStuNameIndex = null;
        this.drawerClassName = "";
        this.stuNames = [];
      }
    },
    selectClass(index) {
      // 检查是否已经选中了当前班级
      if (index === this.selectedClassNameIndex) {
        // 如果已经选中了当前班级，则取消选中并恢复原始状态
        this.drawerClassName = "";
        this.selectedClassNameIndex = null;
      } else {
        // 如果未选中当前班级，则选中它
        this.drawerClassName = this.classNames[index];
        this.selectedClassNameIndex = index;
        this.selectedStuNameIndex = null;
      }
    },
    selectStuName(index) {
      // 检查是否已经选中了当前学生姓名
      if (index === this.selectedStuNameIndex) {
        // 如果已经选中了当前学生姓名，则取消选中并恢复原始状态
        this.drawerStuName = "";
        this.selectedStuNameIndex = null;
      } else {
        // 如果未选中当前学生姓名，则选中它
        this.drawerStuName = this.stuNames[index];
        this.selectedStuNameIndex = index;
      }
    },
    confirmJump() {
      const majorInfo = {
        year: this.selectedYear,
        college: this.drawerCollegeName,
        major: this.drawerMajorName,
      };
      const classInfo = {
        year: this.selectedYear,
        college: this.drawerCollegeName,
        major: this.drawerMajorName,
        className: this.drawerClassName,
      };
      if (
        this.drawerCollegeName != "" &&
        this.drawerMajorName == "" &&
        this.drawerClassName == ""
      ) {
        console.log("跳转学院,", this.drawerCollegeName);
        //修复在班级页面时跳转学院时导航条右侧数据不刷新问题
        //解决：跳转到显示该学院第一个专业数据页面
        const currentRoute = this.$router.currentRoute.path;
        if (currentRoute == "/department/people") {
          // 跳转到目标路由
          this.$router.push("/department/level");
        }
        pubsub.publish("sendCollegeName", this.drawerCollegeName);
      } else if (
        this.drawerCollegeName != "" &&
        this.drawerMajorName != "" &&
        this.drawerClassName == ""
      ) {
        console.log("跳转专业,", majorInfo);
        const currentRoute = this.$router.currentRoute.path;
        if (currentRoute == "/department/people") {
          // 跳转到目标路由
          this.$router.push("/department/level");
        }
        pubsub.publish("sendCollegeName", this.drawerCollegeName);
        pubsub.publish("selectMajorInfo", majorInfo);
      } else if (
        this.drawerCollegeName != "" &&
        this.drawerMajorName != "" &&
        this.drawerClassName != "" &&
        this.drawerStuName == ""
      ) {
        console.log("跳转班级,", classInfo);
        const currentRoute = this.$router.currentRoute.path;
        if (currentRoute != "/department/people") {
          // 跳转到目标路由
          this.$router.push("/department/people");
        }
        const drawerCollegeName = this.drawerCollegeName;
        setTimeout(function () {
          pubsub.publish("sendCollegeName", drawerCollegeName);
          pubsub.publish("selectClassInfo", classInfo);
        });
      } else if (
        this.drawerCollegeName != "" &&
        this.drawerMajorName != "" &&
        this.drawerClassName != "" &&
        this.drawerStuName != ""
      ) {
        let stuId = this.drawerStuName.stuId;

        setTimeout(function () {
          pubsub.publish("selectClassInfoToPerson", classInfo);
          pubsub.publish("selectStuInfo", stuId);
        }, 0);
        console.log("跳转个人,", this.drawerStuName.stuId);
        // console.log("个人班级,", classInfo);
        const currentRoute = this.$router.currentRoute.path;
        if (currentRoute !== "/person") {
          // 跳转到目标路由
          this.$router.push("/person");
        }
      }
      this.drawer = false;
    },
    getStuNamesByDrawer() {
      this.$http({
        url: this.$http.adornUrl(
          `/chaoxing/stuinfo/listname/${this.selectedYear}/${this.drawerCollegeName}/${this.drawerMajorName}/${this.drawerClassName}`
        ),
        method: "get",
      }).then((response) => {
        // console.log("抽屉学生姓名", response.data.data);
        this.stuNames = response.data.data;
      });
    },
    selectedAndToFirst() {
      // 在接收到消息时，找到匹--配的学院索引并选中它
      const selectedCollegeIndex = this.colleges.findIndex(
        (college) => college === this.collegeName
      );
      if (selectedCollegeIndex !== -1) {
        // 如果找到匹配的学院索引，则选中它并排在第一个位置
        this.selectCollege(selectedCollegeIndex);
      }
    },
    getColleges() {
      this.$http({
        url: this.$http.adornUrl(`/chaoxing/college/list`),
        method: "get",
      }).then((response) => {
        for (let index in response.data.college) {
          this.colleges.push(response.data.college[index].college);
        }
        this.selectedAndToFirst();
      });
    },
    initMajorsByCollege() {
      // console.log("initMajorsByCollege");
      this.$http({
        url: this.$http.adornUrl(
          `/chaoxing/majorratio/list/college/2021/${this.collegeName}`
        ),
        method: "get",
      }).then((response) => {
        this.majors = response.data.data;
      });
    },
    // 抽屉关闭执行的函数
    // handleClose(done) {
    //   // this.$confirm("确认关闭？")
    //   //   .then(() => {})
    //   //   .catch(() => {});
    //   done();
    // },
    // clickFly(item) {
    //   switch (item) {
    //     case "学校":
    //       {
    //         const currentRoute1 = this.$router.currentRoute.path;
    //         // 目标路由路径
    //         const targetRoute1 = "/school";
    //         if (currentRoute1 !== targetRoute1) {
    //           // 跳转到目标路由
    //           this.$router.push(targetRoute1);
    //         }
    //       }
    //       break;
    //     case "专业":
    //       {
    //         const currentRoute2 = this.$router.currentRoute.path;
    //         // 目标路由路径
    //         const targetRoute2 = "/department/level";
    //         if (currentRoute2 !== targetRoute2) {
    //           // 跳转到目标路由
    //           this.$router.push(targetRoute2);
    //         }
    //       }

    //       break;
    //     case "班级":
    //       {
    //         const currentRoute3 = this.$router.currentRoute.path;
    //         // 目标路由路径
    //         const targetRoute3 = "/department/people";
    //         if (currentRoute3 !== targetRoute3) {
    //           // 跳转到目标路由
    //           this.$router.push(targetRoute3);
    //         }
    //       }

    //       break;
    //     case "个人":
    //       {
    //         const currentRoute4 = this.$router.currentRoute.path;
    //         // 目标路由路径
    //         const targetRoute4 = "/person";
    //         if (currentRoute4 !== targetRoute4) {
    //           // 跳转到目标路由
    //           this.$router.push(targetRoute4);
    //         }
    //       }

    //       break;
    //     default:
    //       // 默认情况下的处理
    //       break;
    //   }
    //   // console.log(item);
    //   // this.handleClose();
    //   // item;
    // },
    //点击菜单
    clickMenu(item) {
      this.major = item;
      this.postMajorInfo(item);
      // console.log("切换专业", item);
      // this.$router.push("/" + item.url);
      // 获取当前路由路径
      const currentRoute = this.$router.currentRoute.path;

      // 目标路由路径
      const targetRoute = "/department/level";

      // 判断当前路由与目标路由是否相同
      // if (currentRoute !== targetRoute) {
      //   this.$router.push("/department/level");
      // }
      if (currentRoute !== targetRoute) {
        // 跳转到目标路由
        this.$router.push(targetRoute);
      }
    },
    clickKiss(item) {
      this.className = item;
      this.postClassInfo(item);
      // console.log("点击班级,", item);
      // this.$router.push("/" + item.url);
      // 获取当前路由路径
      const currentRoute = this.$router.currentRoute.path;
      // console.log(item);
      // 目标路由路径
      const targetRoute = "/department/people";

      // 判断当前路由与目标路由是否相同
      // if (currentRoute !== targetRoute) {
      //   this.$router.push("/department/people");
      // }
      if (currentRoute !== targetRoute) {
        // 跳转到目标路由
        this.$router.push(targetRoute);
      }
    },
    getMajorAndClassName() {
      this.$http({
        url: this.$http.adornUrl(
          `/chaoxing/majorratio/list/${this.selectedYear}/${this.collegeName}`
        ),
        method: "get",
      }).then((response) => {
        // console.log("学院的专业和班级", response);
        this.Menudata = response.data.data;
        this.postMajorInfo(Object.keys(response.data.data)[0]);
        // this.postClassInfo(this.className);
      });
    },
    //发布专业消息
    postMajorInfo(major) {
      const majorInfo = {
        year: this.selectedYear,
        college: this.collegeName,
        major: major,
      };
      setTimeout(function () {
        pubsub.publish("selectMajorInfo", majorInfo);
      }, 0);
      console.log("发布专业信息", majorInfo);
    },
    //发布班级消息
    postClassInfo(className) {
      const classInfo = {
        year: this.selectedYear,
        college: this.collegeName,
        major: this.major,
        className: className,
      };
      setTimeout(function () {
        pubsub.publish("selectClassInfo", classInfo);
      }, 0);
      console.log("发布班级信息", classInfo);
    },
    changeYear(year) {
      // console.log(year);
      this.selectedYear = year;
      this.getMajorAndClassName();
    },
  },

  beforeDestroy() {
    pubsub.unsubscribe(this.pubId);
  },
};
</script>

<style scoped>
@import url("@/global.css");
.dage {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  box-sizing: border-box;
}
/* 头部位置 */
.eldeheader {
  width: 100%;
  height: 100%;
  flex: 1;
  line-height: 3rem;
}
.headerju {
  position: relative;
  top: 1rem;
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: space-between;
}
.headerju h1 {
  font-family: 宋体;
}
/* 抽屉的样式 */
.daohang {
  color: #79e2f9;
  background: rgba(112, 140, 210, 0.25);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(112, 140, 210, 0.6);
  border-bottom: 1px solid rgba(112, 140, 210, 0.35);
  border-left: 1px solid rgba(112, 140, 210, 0.35);
}
.btt {
  background-color: #ffffff00;
  opacity: 0;
}
.chouti {
  display: flex;
  padding: 0;
  margin: 0px;
  width: 100%;
  height: 95.5%;
  justify-content: space-around;
  /* background-color: rgba(255, 255, 255, 0); */
  box-sizing: border-box;

  position: relative;
  margin: 0 auto;
  margin-bottom: 7px;
}

.ct {
  width: 20%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  padding: 10px;

  border-top-right-radius: 5%;
  border-bottom-right-radius: 5%;
  background: rgba(121, 226, 249, 0.25);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(121, 226, 249, 0.6);
  border-bottom: 1px solid rgba(121, 226, 249, 0.35);
  border-left: 1px solid rgba(121, 226, 249, 0.35);
}
.ct1 {
  left: 0;
  z-index: 10;
  box-shadow: 5px 5px 5px rgba(121, 226, 249, 0.35);
}

.ct1 ul li:nth-child(1) {
  color: #000000;
  background-color: rgb(121, 226, 249, 0.2);
}
.ct ul li:hover {
  color: #000000;
  background-color: rgb(121, 226, 249, 0.2);
}
.selected {
  color: #000000;
  background-color: rgb(121, 226, 249, 0.2); /* 修改选中项的背景颜色为黄色 */
}
.ct2 {
  left: 330px;
  z-index: 9;
  /* background-color: rgb(255, 245, 240); */
  box-shadow: 5px 5px 5px rgba(121, 226, 249, 0.35);
}
.ct3 {
  left: 660px;
  z-index: 8;
  /* background-color: rgb(241, 255, 240); */
  box-shadow: 5px 5px 5px rgba(121, 226, 249, 0.35);
}
.ct4 {
  left: 990px;
  z-index: 7;
  /* background-color: rgb(241, 240, 255); */
  box-shadow: 5px 5px 5px rgba(121, 226, 249, 0.35);
}
.ct5 {
  left: 1320px;
  z-index: 6;
  /* background-color: rgb(255, 240, 240); */

  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  background: rgba(121, 226, 249, 0);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(121, 226, 249, 0);
  border-bottom: 1px solid rgba(121, 226, 249, 0);
  border-left: 1px solid rgba(121, 226, 249, 0);
}
.ct ul {
  width: 100%;
  height: 100%;
  margin-left: 20px;
  overflow: auto;
}
.ct ul li {
  /* color:#fff; */
  font-size: 20px;
  width: 85%;
  padding: 4px;
  cursor: pointer;
}
/* .ct:not(5){
  background: rgba(121, 226, 249, 0.25);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(121, 226, 249, 0.6);
  border-bottom: 1px solid rgba(121, 226, 249, 0.35);
  border-left: 1px solid rgba(121, 226, 249, 0.35);
} */
.jing {
  border: none;
  margin-left: 40%;
  margin-top: 8%;
  width: 4rem;
  height: 2rem;
  /* background-color: #f2eabf; */
  border-radius: 10%;

  background: rgba(121, 226, 249, 0.25);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(121, 226, 249, 0.6);
  border-bottom: 1px solid rgba(121, 226, 249, 0.35);
  border-left: 1px solid rgba(121, 226, 249, 0.35);
}
.ct ul {
  width: 105%;
}
/* .ct ul {
  border-right: 1px #000 solid;
  text-align: center;
  width: 110%;
  height: 100%;
  overflow: auto;
}
.ct ul li {
  width: 100%;
  height: 20%;
} */
/* 按钮的样式 */
/* .anniu {
  position: absolute;
  right: 10;
} */
.eldefotter {
  width: 100%;
  height: 90%;
  transform: scale(0.97);
  flex: 9;
  display: flex;
  margin: 0 auto;
  justify-content: center;
  box-sizing: border-box;
}
/* 个人搜索跳转部分 */
.search {
  height: 50px;
  width: 500px;
  margin: 15px 0;
  /* background-color: aliceblue; */

  box-sizing: border-box;
  margin-left: 980px;

  
  /* box-sizing: border-box; */
  /* width: 100%;
  height: 10%; */
  /* border-bottom: 1px solid #000; */
  /* position: absolute;
  top:0;
  left:0; */
}
/* 侧边栏位置 */
.eldeaside {
  position: relative;
  top: 1rem;
  left: 10px;
  /* flex: 1; */
  height: 90%;

  overflow: hidden;
}

.Cbian {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.Yqiang {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.upK1 {
  flex: 1;
  margin-bottom: 0.5rem;
}
.upK2 {
  flex: 12;
  overflow: hidden;
}
/* .el-col {
  width: 12rem;
  height: 40rem;
} */
/* 侧边栏年级分区 */
.oop {
  font-size: 15px;
}
.chose h3 {
  text-align: center;
  height: 2rem;
  /* height: 40px; */
  line-height: 2rem;
  color: #fff;
  /* background-color: aqua; */
  margin: 10px;
  /* line-height: 40px; */
}
.k1 {
  width: 12rem;
  /* width: 240px; */
  text-align: center;
}

h5 {
  text-align: center;
}

/* 侧边栏专业分区 */
.el-col {
  /* width: 12.5rem; */
  /* width: 250px; */
  text-align: center;
  overflow-x: hidden;
  overflow-y: scroll;
  width: 108%;
  height: 100%;
  margin: 0 auto;
  /* height: 511.3px; */
}
.el-menu {
  transform: scale(0.9);
  border-radius: 4px;
  border: 1px solid rgba(112, 140, 210, 0.6);
  border-bottom: 1px solid rgba(112, 140, 210, 0.35);
  border-left: 1px solid rgba(112, 140, 210, 0.35);
}

.el-menu-item {
  transform: scale(1);
  /* border-radius: 4px; */
}
.el-menu-item-group__title {
  display: none;
}
/* 右边的盒子 */
.eldemain {
  position: relative;
  top: -0.5rem;
  flex: 5.6;
  transform: scale(0.98);
  padding: 0;
  height: 100%;
}

/* .el-drawer,el-drawer{
  background-color: transparent!important;
} */
</style>
